/* This stylesheet is used for pages that display the WWP syllabus */
/* collection (including the presentation of search results)       */
/* It overrides some normal styles defined in the main wwp.css     */
/* file; any file that links to this stylesheet needs to do so     */
/* AFTER linking to the main wwp.css stylesheet                    */

div.main {
    min-height: 800px; /* add more height to avoid "footer-flash" when replacing content */
}
form {
    margin-bottom: 1.5em;
}

/* ######################################################## */
/* TABLE DISPLAY                                            */
/* These styles define the appearance of the summary/browse */
/* view.                                                    */
/* ######################################################## */

#sort-table {
    display: none; /* don't display initially; fades in using JavaScript */
    font-size: 87.5%; /* 14px equivalent */
}

#sort-table thead {
    border-top: 1px solid rgb(184,200,217);
    border-bottom: 1px solid rgb(184,200,217);
}
#sort-table th {
    background: url('/utils/gfx/bg.gif') right center no-repeat;
}

#sort-table td {
    padding: .714em .714em .714em 0;
}

#sort-table th.headerSortDown {
    background: url('/utils/gfx/desc.gif') right center no-repeat;
    color: rgb(49,69,89);
}

#sort-table th.headerSortUp {
    background: url('/utils/gfx/asc.gif') right center no-repeat;
    color: rgb(49,69,89);
}

/* used for the fourth column, which contains the "link" */
/* arrow (visible only when hovering over the row)       */
#sort-table th.nosort {
    background-image: none;
}

/* override appearance of wwp tiny logo after last child */
#sort-table p:last-child:after, #sort-table li:last-child:after {
    content: '';
}

/* set width of instructor and institution columns to minimze */
/* wrapping of long names */
#sort-table td.instructor {
    width: 27.5%; /* approx 146px */
}

#sort-table td.institution {
    width: 27.5%; /* approx 146px */
}

/* contains the "link" arrow graphic */
#sort-table td.fullview {
    width: 1.143em; /* approx 16px */
    padding-right: 0;
}

#sort-table td.fullview img {
    display: none;
}

#sort-table tr {
    border-bottom: 1px solid rgb(225,225,235);
    cursor: pointer;
}

#sort-table tr:hover {
    background: rgb(245,245,255);
}

#sort-table tr:hover td.fullview img {
    display: inline;
}


/* ######################################################## */
/* PAGER CONTROLS                                           */
/* Styles for controlling the appearance of the pager       */
/* controls that make long tables more managable            */
/* ######################################################## */

div#pager { 
    display: none; /* revealed via javascript when needed */
    position: relative;         
    text-align: center;
    font-size: 75%;
}

div#pager form {
    margin: 0;
    padding: 0.25em;
}

div#pager span.left {
    float: left;
}

div#pager span.right {
    float: right;
}

div#pager form a {
    padding: 0.25em;
    color: rgb(107,130,153);
    cursor: pointer;
 }


/* ######################################################## */
/* FULL SYLLABUS DISPLAY                                    */
/* These styles define the appearance of the syllabus       */
/* "reading" view.                                          */
/* ######################################################## */

div.syllabus {
    display: none; /* invisible when first loaded via AJAX */
    border: 1px solid rgb(184,200,217);
    border-top: 3px double rgb(184,200,217);
    padding: 0 1em;
}

div.syllabus div.assignments div, div.syllabus div.readings ul {
    display: none;
    padding-left: 1em;
}

div.syllabus div.readings li {
    margin-left: 0;
}

div.syllabus h3.collapsed {
    background: url('/utils/gfx/collapsed_dark.jpg') center left no-repeat;
    padding-left: 1em;
    cursor: pointer;
}

div.syllabus h3.expanded {
    background: url('/utils/gfx/expanded_dark.jpg') center left no-repeat;
    padding-left: 1em;
    cursor: pointer;
}

/* override appearance of wwp tiny logo after last child */
div.syllabus div p:last-child:after, div.syllabus div li:last-child:after, div.syllabus div.assignments li:last-child:after {
    content: '';
}

/* reset appearance of wwp tiny logo after last child */
div.syllabus div.readings p:last-child:after, div.syllabus div.readings li:last-child:after {
    display: block;
    margin-top: 1em;
    content: url('/utils/gfx/logo_tiny.png');
    color: rgb(107,130,153);
    text-align: center;
    line-height: 0;
}